<template>
  <section class="pay-container" v-cloak>
    <p class="class-name">缴费流水 - {{socialCompanyName}}</p>
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span class="marginRight10">缴费日期</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围"
            :picker-options="dateOptions">
          </el-date-picker>
        </label>
        <label for="" class="choose">
          <span class="marginRight10">缴费项目</span>
          <el-select v-model="socialPaymentSkuName" filterable  placeholder="请选择" size="small" style="width:160px" class="select-box year-box">
            <el-option
              v-for="item in payList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </label>
        <label for="" class="choose">
          <span class="marginRight10">缴费单号</span>
          <el-input placeholder="缴费单号" size="small" class="search-input" v-model="orderNo">
          </el-input>
        </label>
        <label for="" class="choose">
          <el-button type="primary" size="small" @click="search" style="width:80px">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="export">
      <div class="data-t">
        <span>总缴费笔数：{{ countInfo.payNum }}</span>
        <span style="margin-left: 18px;">总缴费金额：{{ countInfo.payAmount | currency }}元</span>
        <span style="margin-left: 18px;">总手续费金额：{{ countInfo.factorage | currency }}元</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row class="data-list">
      <ctable :thead="thead" :table-data="lists" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true"></ctable>
    </el-row>
  </section>
</template>

<script>
import { countSocialStatement } from 'api/social/statement/index'
import { socialOrderList } from 'api/social/manage/index'
import ctable from 'components/common/ctable'
import { currency, timeFormat, getDayInitTime } from 'src/filter/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      socialCompanyName: common.params('socialCompanyName'), // 单位名称
      orderNo: '', // 缴费单号
      startTime: 0, // 开始时间
      endTime: 0, // 结束时间
      dateTime: [], // 缴费日期
      lists: [], // 数据列表,
      thead: [{ // ctable组件头
        name: '缴费单号',
        prop: 'orderNo'
      }, {
        name: '姓名',
        prop: 'socialCompanyName'
      }, {
        name: '身份证号',
        prop: 'socialCompanyCode'
      }, {
        name: '缴费时间',
        prop: 'payTime'
      }, {
        name: '缴费项目',
        prop: 'socialPaymentSkuName'
      }, {
        name: '缴费金额',
        prop: 'amount'
      }, {
        name: '手续费',
        prop: 'factorage',
        format: this.priceFilter
      }, {
        name: '支付总额',
        prop: 'shouldPay',
        format: this.priceFilter
      }],
      options: [{
        name: '查看详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      socialPaymentSkuName: '', // 选择的缴费项目
      payList: [], // 所有的缴费项目
      countInfo: {} // 统计信息
    }
  },
  created () {
    this.dateTime = [new Date(common.params('startTime') * 1000), new Date(common.params('endTime') * 1000)]
    this.getData(1)
    this.getPaymentList()
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      // 获取统计信息
      countSocialStatement({
        startTime: this.startTime,
        endTime: this.endTime,
        orderNo: this.orderNo,
        socialPaymentSkuName: this.socialPaymentSkuName
      }).then(res => {
        this.countInfo = res.data
      })
      // 获取数据列表
      socialOrderList({
        page: int,
        count: 15,
        startTime: this.startTime,
        endTime: this.endTime,
        orderNo: this.orderNo,
        socialPaymentSkuName: this.socialPaymentSkuName
      }).then(res => {
        res.data.forEach((obj) => {
          obj.payTime = common.timeFormat(obj.payTime, 'yyyy-MM-dd hh:mm:ss')
          obj.amount = ((obj.shouldPay - obj.factorage) / 100).toFixed(2)
        })
        this.lists = res.data || []
        this.pageObj.page = res.page
      })
    },
    getPaymentList () { // 获取所有的项目
      let [d, result] = [new Date(), []]
      d.setMonth(d.getMonth() + 1)
      for (let i = 0; i < 12; i++) {
        d.setMonth(d.getMonth() - 1)
        let m = d.getMonth() + 1
        m = m < 10 ? '0' + m : m
        result.push(d.getFullYear() + '年' + m + '月社保费')
      }
      this.payList = result
    },
    toDetail (obj) {
      this.$router.push({name: 'payManageDetail', query: { id: obj.id }})
    },
    priceFilter (row, col, value) {
      return currency(value)
    },
    search () {
      this.getData(1)
    },
    dateFilter (row, col, value) {
      return timeFormat(value, 'yyyy-MM-dd')
    },
    exportData () {
      let loginKey = window.localStorage.loginKey
      window.open(`/net/schooladmin/school-order/exports-statement?classId=${this.classId}&startTime=${this.startTime}&endTime=${this.endTime}&schoolPaymentSkuId=${this.payment}&login-key=${loginKey}`)
    }
  }
}
</script>
<style lang="less" scoped>
.pay-container {
  padding: 15px 25px 0;
  .data-t {
    color: #20a0ff;
  }  
  .marginRight10{
    margin-right: 10px;
  }
  .search-input{
    width: 200px;
    margin-right: 40px;
  }
  .class-name {
    line-height: 2;
    margin-bottom: 10px;
  }
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .export {
    margin-top: 10px;
  }
}
</style>

